<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta content="multipart/form-data;" />

    <title></title>
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet"/>
    <link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" />

    <!-- PLUGINS CSS STYLE -->
    <link href="assets/plugins/toaster/toastr.min.css" rel="stylesheet" />
    <link href="assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
    <link href="assets/plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
    <link href="assets/plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <link href="assets/plugins/ladda/ladda.min.css" rel="stylesheet" />
    <link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
    <link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />

    <!-- FAVICON -->
    <link href="assets/img/favicon.png" rel="shortcut icon" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/assets/plugins/nprogress/nprogress.js"></script>
</head>

<body class="header-fixed header-light" id="body">
<div class = "wrapper">
    <div class = "page-wrapper">
        <div th:include = "header::header"></div>
        <div class = "content-wrapper">
            <div class = "content">
                <div class = "bg-white border-rounded">
                    <div class = "row no-gutters">
                        <div class="profile-content-left pt-5 pb-3 pl-5 pr-5">
                            <div class="card m-auto" style="width: 50%;">
                                <div class="card-header bg-primary">
                                    <div class="app-brand">
                                        <a>
                                            <span class="brand-name">上传商品</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body p-5">
                                    <form th:action="@{/new}" method="post" enctype="multipart/form-data">
                                        <div class="row">
                                            <div class="form-group col-md-12 mb-4">
                                                <label for="goodsname">商品名称</label>
                                                <input type="text" name="name" class="form-control input-lg" id="goodsname" placeholder="您的宝贝是？">
                                                <p style="color: red" th:unless="${checkgoodsname}" class="error">请输入商品名称</p>
                                            </div>
                                            <div class="form-group col-md-12 mb-4">
                                                <label for="description">商品描述</label>
                                                <textarea name="description" class="form-control" id="description" rows="3" placeholder="您的宝贝有什么特点呢？"></textarea>
                                                <p style="color: red" th:unless="${checkgoodsdescription}" class="error">请输入对商品的描述</p>
                                            </div>
                                            <div class="form-group col-md-12 mb-4">
                                                <label for="description">商品数量</label>
                                                <input type="text" name="stock" class="form-control input-lg" id="stock" placeholder="您要卖出去多少宝贝？" style="width: 50%">
                                                <p style="color: red" th:unless="${checkgoodsstock}" class="error">请输入1~999之间的整数</p>
                                            </div>
                                            <div class="form-group col-md-12 mb-4">
                                                <label for="price">价格（元）</label>
                                                <input type="text" name="price" class="form-control input-lg" id="price" placeholder="您的定价？" style="width: 50%">
                                                <p style="color: red" th:unless="${checkgoodsprice}" class="error">请输入1~1000000之间的数字，最多两位小数</p>
                                            </div>
                                            <div class="form-group col-md-12 mb-4">
                                                <label for="price">商品图片</label>
                                                <input type="file" name="avataruri">
                                                <p style="color: red" th:unless="${checkgoodsimg}" class="error">请上传格式为JPG JPEG PNG格式的商品图片！</p>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="d-flex my-2 justify-content-between">
                                                    <div class="d-inline-block mr-3">
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-lg btn-primary btn-block mb-4">提交</button>
                                                <a class="text-blue" href="">取消</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/toaster/toastr.min.js"></script>
<script src="/assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/charts/Chart.min.js"></script>
<script src="/assets/plugins/ladda/spin.min.js"></script>
<script src="/assets/plugins/ladda/ladda.min.js"></script>
<script src="/assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
<script src="/assets/plugins/select2/js/select2.min.js"></script>
<script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
<script src="/assets/plugins/daterangepicker/moment.min.js"></script>
<script src="/assets/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/assets/plugins/jekyll-search.min.js"></script>
<script src="/assets/js/sleek.js"></script>
<script src="/assets/js/chart.js"></script>
<script src="/assets/js/date-range.js"></script>
<script src="/assets/js/map.js"></script>
<script src="/assets/js/custom.js"></script>
</body>
</html>
